<template>
  <div class="create-container">
    <div class="right-container">
      <!---->
      <el-form :inline="true" status-icon label-position="right" class="demo-form-inline"
               label-width="140px" style="display: flex;width:65%;">
        <div style="flex: 1">
          <el-form-item label="申请开始日期：" prop="startDate">
            <el-date-picker
              v-model="listQuery.startDate"
              type="date"
              placeholder="申请开始日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="申请结束日期：" prop="endDate">
            <el-date-picker
              v-model="listQuery.endDate"
              type="date"
              placeholder="申请结束日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </div>
        <div style="flex: 1">
          <el-form-item label="状态：" prop="status">
            <!--<el-input v-model="listQuery.status" placeholder="状态"/>-->
            <el-select v-model="listQuery.status" placeholder="请选择">
              <el-option value="0" label="申请">申请</el-option>
              <el-option value="1" label="已支付">已支付</el-option>
              <el-option value="9" label="驳回">驳回</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属用户登录名称：" prop="useName">
            <el-input v-model="listQuery.useName" placeholder="所属用户登录名称"/>
          </el-form-item>
          <el-form-item>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="queryList">查询</el-button>
          </el-form-item>
        </div>
      </el-form>

      <el-table v-loading="listLoading" :data="list" ref="cargoTable" element-loading-text="正在查询中。。。" border fit highlight-current-row
                :header-cell-style="{background:'#F2F2F2',color:'#666'}">
        <el-table-column align="left" min-width="100" label="用户登录名称" prop="userName"/>
        <el-table-column align="left" min-width="120" label="申请时间" prop="applyTime"/>
        <el-table-column align="left" min-width="130" label="佣金提现金额 (元)" prop="amunt"/>
        <el-table-column align="left" min-width="100" label="真实姓名" prop="realName"/>
        <el-table-column align="left" min-width="120" label="银行账户号" prop="account"/>
        <el-table-column align="left" min-width="130" label="账户银行标准编码" prop="bankCode"/>
        <el-table-column align="left" min-width="100" label="状态" prop="status">
          <template slot-scope="scope">
            {{{ "0":"申请", "1":"已支付", "9":"驳回" }[ scope.row.status ]}}
          </template>
        </el-table-column>
        <el-table-column align="left" min-width="100" label="驳回原因" prop="reason"/>
        <el-table-column align="left" min-width="130" label="处理时间" prop="settleTime"/>
        <el-table-column align="center" label="操作" width="120" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="text" size="mini" plain
                       @click="handleEdit(scope.row)">返佣处理
            </el-button>
          </template>
        </el-table-column>
        <el-table-column type="expand" width="1">
          <template slot-scope="scope">
            <el-form ref="editForm" :model="editForm" label-position="right" class="demo-table-expand" label-width="180px">
              <el-form-item label="处理结果：" style="width: 35%;">
                <!--<el-input v-model="listQuery.status"/>-->
                <el-select v-model="editForm.status" placeholder="请选择">
                  <el-option value="0" label="申请">申请</el-option>
                  <el-option value="9" label="驳回">驳回</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="驳回原因：" style="width: 40%;" v-if="editForm.status == '9'">
                <el-input v-model="editForm.reason" type="textarea" placeholder="驳回原因"/>
              </el-form-item>
              <el-form-item>
                <el-button class="filter-item" type="primary" @click="Submit(scope.row)">提交</el-button>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
      </el-table>
      <!--<pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                  @pagination="queryList" style="margin: 0"/>-->

    </div>
  </div>
</template>

<script>
import {doGet, doPost} from '@/api'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'usersearch',
  components: { Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        /*pageNum: 1,
        pageSize: 20,*/
        startDate: undefined,
        endDate: undefined,
        useName: undefined,
        status: undefined
      },
      editForm: {
        status: undefined,
        reason: undefined
      },
      listLoading: true,
    }
  },
  created() {
    this.queryList()
  },
  methods: {
    queryList() {
      this.listLoading = true
      doGet('cashsettle.html?op=search', this.listQuery).then(response => {
        this.list = response.rows
        this.total = response.data.totalcount
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    handleEdit(row) {
      let $table = this.$refs.cargoTable;
      this.list.map(item => {
        if (row.id != item.id) {
          $table.toggleRowExpansion(item, false)
        }
      })
      $table.toggleRowExpansion(row)
    },
    Submit(row) {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.editForm = {
            id: row.id,
            status: this.editForm.status,
            reason: this.editForm.reason
          }
          doGet('cashsettle.html?op=settle', this.editForm).then(response => {
            this.queryList()
            this.$notify.success({
              title: '成功',
              message: '返佣处理成功'
            })
          }).catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.message
            })
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
